<template>
  <!-- 头部盒子 确认报名-->
  <view class="background" :style="{
    backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user/renwulibieoa_bg_baomignxinxi.png)`,
    paddingTop: (safeAreaInsets?.top + 44) + 'px'
  }" v-if=" applyview == 0">
    <view class="content data_area" v-if="details">
      <view class="title">确认报名</view>
      <view class="hint">
        <image :src="`${baseUrl}/uploads/uniapp_image/staff/piliangshezhi_icon1@2.png`" mode="scaleToFill" />
        <view class="hint_infor">请确认工作时间和工作地点，再点击报名</view>
      </view>
      <view class="item">
        <view class="item_title">岗位名称</view>
        <view class="item_cont">{{ details.title }}</view>
      </view>
      <view class="item">
        <view class="item_title">金额（男/女）</view>
        <view class="item_cont">{{ details.man_salary_show }} / {{ details.woman_salary_show }}</view>
      </view>
      <view class="item">
        <view class="item_title">工作地点</view>
        <view class="item_cont">{{ details.address }}</view>
      </view>
      <view class="item">
        <view class="item_title">工作时间</view>
        <view class="item_cont">{{ details.date }} {{ details.start_time }}~{{ details.end_time }}</view>
      </view>
      <view class="item">
        <view class="item_title">用工需求</view>
        <view class="item_cont"><up-parse :content="details.demand "></up-parse></view>
      </view>
    </view>
    <view class="placeholder"></view>
      <s-public-modal @closepop="closepop" :show="popshows" :imagesucceedSrc="dataToinformaion.imageSrc"
        :subtitle="dataToinformaion.subtitle" :dialogStatus="dataToinformaion.dialogStatus"></s-public-modal>
      <view>
        <s-button @netWork="submitForm" :text="text"></s-button>
      </view>
  </view>

  <!-- 头部盒子 临时工打卡-->
  <s-layout v-else  id="layout" :title="'临时工打卡'" :navbar="normal" leftIconColor="#ffffff"   
	:autoBack="false" 
  :leftIcon="''"
	:bgColor="state.bgColor" 
  :tabbarshow ="false"
	:titleStyle="{ color: '#FFF', fontSize: '32rpx' }" 
  >
  <view class="background" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/class_bg.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
    <view class="classDate">
      <!-- 日打卡 -->
      <s-calendar class="date" :custom_date="state.date"></s-calendar>
    </view>
    <!-- 打卡记录 -->
    <view class="comprehensive" v-if="stepList.length">
      <!-- v-if="stepList.length" -->
        <view class="att_cont">
          <!---地址-->
          <view class="card_address"  v-if="details">
            <view class="card_address_item">
              <image
                :src="`${baseUrl}/uploads/uniapp_image/staff/linshigongdaka_icon.png`"
                mode="scaleToFill"
              />
              <text>{{ details.title }}</text>
            </view>
            <view class="card_address_item">
              {{details.address}}
            </view>
            <view class="card_address_item">
              <view class="item_name">班次时间：{{details.start_time}} - {{ details.end_time }}</view>
            </view>
          </view>
          <view class="state">
            <s-attendance-state :stepList="stepList" :dates="dates" :status="1"></s-attendance-state>
          </view>

        </view>
        <!-- 底部提交按钮 -->
        <s-button @netWork="submitFormcard" :text="state.cardtext" :backgroundColor="state.btnClass"></s-button>
      </view>
      <up-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></up-empty>
      
  </view>
  </s-layout>

  <!-- 浮动按钮 -->
  <view v-if=" applyview == 1">
    <fui-fab :background="background" :position="'right'" @click="handleClick" bottom="200" width="100" :isDrag="true">
      <fui-icon name="warehouse" color="#fff" :size="60"></fui-icon>
    </fui-fab>
  </view>
  
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref, computed } from "vue";
import { baseUrl } from "@/sheep/config";
import { formatDate } from '@/utils/fn.js';
import sheep from '@/sheep';
const { safeAreaInsets } = uni.getSystemInfoSync()
const text = ref("确认报名");
const state =reactive({
  bgColor:'rgba(0,0,0,0)',
  date:'',
  cardtext:'下班打卡',
  btnClass:'linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%)',
})

// 悬浮按钮
const background = ref('#465CFF')
const handleClick =  (e) => {

  uni.navigateBack({    
    delta: 1
  })
}


//打卡弹窗
const popshows = ref(false)
const dataToinformaion = ref({
  subtitle: '报名成功，请准时上班',
  imageSrc: '',
  dialogStatus: true
})
//打卡弹窗关闭
function closepop(e) {
  if(e == false){
    applyview.value = 0
    popshows.value = e
  }else{
    popshows.value = e
    applyview.value = 1   
  }
 
}
const schedule_id = ref()
const share_id = ref()
onLoad((options) => {
  schedule_id.value = options.schedule_id
  share_id.value = options.share_id
  getapply()
  setTimeout(()=>{
    getScheduleView()
  },500)
})
//获取是否报名
const applyview = ref(0)
const  getapply = async()=>{
  let params = {
    schedule_id: schedule_id.value 
  }
  const res = await sheep.$api.project.postScheduleUserApply(params);
  if (res.code == 1 ){
    let params = {
      date: state.date,
      schedule_id:schedule_id.value
    };
    if(res.data){
      applyview.value = 1   
    }
  getdayList(params)
  }
}
// 确定按钮报名
const submitForm = async () => {
  let params = {
    schedule_id: schedule_id.value,
    share_id: share_id.value
  }
  const res = await sheep.$api.project.postScheduleUserAdd(params);
  if (res.code == 1) {
    dataToinformaion.value.subtitle = res.msg
    dataToinformaion.value.dialogStatus = true
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/user/shengchengqiandao_icon6.png'
    popshows.value = true
  } else {
    applyview.value = 0
    dataToinformaion.value.subtitle = res.msg
    dataToinformaion.value.dialogStatus = false
    popshows.value = true
  }
}
//详情
const details = ref()
const getScheduleView = async () => {
  let params = {
    ids: schedule_id.value,
    share_id:share_id.value,
    apply_page:1
  }
  const res = await sheep.$api.project.getScheduleView(params);
  if (res.code == 1) {
    details.value = res.data
    state.date = res.data.date
    // console.log('state.date',state.date);
    // console.log('现在',formatDate(new Date() / 1000, 'yyyy-MM-dd'));
    if(state.date != formatDate(new Date() / 1000, 'yyyy-MM-dd')) {
      state.cardtext = '未到打卡时间'
      state.btnClass = 'linear-gradient(90deg, rgba(145, 145, 145, 1) 0%, rgba(128,128,128) 100%)'
    } else {
      if(state.date <= res.data.demarcation_time){
        state.cardtext = '上班打卡'
      }else{
        state.cardtext = '下班打卡'
      }
    }
  }
}

// 以下是临时工打卡

// 获取状态
const stepList = ref([])
const dates = ref(-1)
const getdayList = (params) => {
  sheep.$api.project.postScheduleUserAttendance(params).then((res) => {
    stepList.value = res?.data
    if (stepList.value) {
      stepList.value.forEach((i) => {
        if (i.clocking_time) {
          dates.value++
        }
        i.clockStatus = i.text 
      
      })
    }
  })
}
// 提交补卡
const submitFormcard = async () => {
  if(state.date != formatDate(new Date() / 1000, 'yyyy-MM-dd')) {
    sheep.$helper.toast('未到打卡时间！');
    return
  } else {
    uni.$u.throttle(() => {
      let parpam={
        schedule_id: schedule_id.value,
        department_id: details.value.department_id
        }
        sheep.$api.project.postScheduleAttendanceAdd(parpam).then((res) => {
          if (res.code == 1) {
              sheep.$helper.toast(res.msg);
              setTimeout(() => {
                sheep.$router.back()
              }, 500)
          } else {
              sheep.$helper.toast(res.msg);
            
          }
        })
      },1000)
    }
}




</script>
<style scoped lang="scss">
@import '../../staff/workbench/compentns/public.scss';
@import '../../staff/workbench/compentns/up_sheet.scss';
page {
  width: 100%;
  height: 100%;
}

.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;

}

.background {
  // height: 350rpx;
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;

  .data_area {
    width: calc(100% - 40rpx);
    margin: 63% auto 0 auto;
  }

  .content {
    min-height: 814rpx;
    border-radius: 28rpx;
    background-color: #FFFFFF;
    margin-bottom: 180rpx;

    .title {
      height: 110rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 40rpx;
    }

    .hint {
      display: flex;
      align-items: center;
      height: 70rpx;
      border-radius: 36rpx;
      margin: 10rpx 30rpx 50rpx 30rpx;
      background-color: #F8F9FF;
      padding-left: 40rpx;

      image {
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }

      .hint_infor {
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-sm;
      }
    }

    .item {
      padding: 0 40rpx;
      display: flex;
      flex-direction: column;
      margin-bottom: 30rpx;

      .item_title {
        margin-bottom: 16rpx;
        color: $uni-color-primary;
        font-weight: 500;
        font-size: $uni-font-size-base;
      }
      &:last-child{
        .item_cont {
          padding-bottom: 20rpx;
        }
      }
      .item_cont {
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-base;
        line-height: 1.6;
      }
    }
  }
}
.nowrap {
  white-space: nowrap;
  /* 保持文本在一行内 */
  overflow: hidden;
  /* 超出容器部分隐藏 */
  text-overflow: ellipsis;
}
// 滚动容器
.comprehensive {
 
  height: auto !important;
}
//以下是临时工打卡

// 背景图片盒子
.container {
  background-size: 100% 40%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

:deep(.u-icon__icon) {
  background: $uni-bg-color;
  width: 64rpx;
  height: 64rpx;
  justify-content: center;
  border-radius: 50%;

}

/*日历*/
.classDate {
  width: 710rpx;
  margin: 80rpx auto 30rpx auto;
  border-radius: 16rpx;
  background-color: $uni-bg-color;
  box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 5;

  &:before {
    content: "";
    z-index: 1;
    position: absolute;
    top: -33rpx;
    left: 30rpx;
    width: 638rpx;
    height: 20rpx;
    border-top-left-radius: 18rpx;
    border-top-right-radius: 18rpx;
    background-color: #D9D9D9;

  }

  &:after {
    content: "";
    z-index: 1;
    position: absolute;
    top: -20rpx;
    left: 10rpx;
    width: 678rpx;
    height: 20rpx;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    background-color: #F1F1F1;

  }

  .date {
    width: 100%;
    border-radius: 16rpx;
  }

  .hint {
    background: #F4F7FF;
    height: 96rpx;
    border-radius: 0 0 16rpx 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC;
   font-size:$uni-font-size-26;
    color: $uni-color-primary;

    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 15rpx;
    }
  }

}

// 滚动
.comprehensive {
  width: calc(100% - 40rpx);
  background-color: rgba(0, 0, 0, 0);
  margin: 0 20rpx;
  height: 67vh;
}

.att_cont {
  width: 100%;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
  padding-bottom: 30rpx;

  .state {
    margin: 0 30rpx !important;
  }
  // 地址
  .card_address{
    margin: 30rpx auto;
    width: 92%;
    padding-top: 20rpx;
    .card_address_item{
      height: 45rpx;
      display: flex;
      align-items: center;
      image{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }
      text{
        color: $uni-text-color;
        font-weight: 500;
        font-size: $uni-font-size-base;
      }
      &:nth-child(2){
        padding-bottom: 10rpx;
        border-bottom: 1rpx solid #eee;
        color: #666666;
        font-weight: 400;
        font-size: 22rpx;
      }
      .item_name{
        margin-right: 30rpx;
        color: #666666;
        font-weight: 400;
        font-size: $uni-font-size-sm;
      }
      &:last-child{
        padding-top: 20rpx;
      }
    }
  }
}
:deep(.auditProcess){
  border-top: 0rpx !important;
}
:deep(.is-disabled) {
  .uni-easyinput__placeholder-class {
    color: $uni-color-primary !important;
    text-align: right;
  }

}

//日期
.dates {
  text-align: right;
  border: #1241E2 1rpx solid;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16rpx;
  height: 64rpx;
  margin: 15rpx 0 0 200rpx;

  image {
    width: 28rpx;
    height: 26rpx;
    margin-right: 10rpx;
  }

  .placeholder {
    color: $uni-color-primary;
    font-weight: 500;
   font-size:$uni-font-size-26;
  }

  .gray {
    color: #999;
    font-weight: 500;
   font-size:$uni-font-size-26;
  }
}

:deep(.uni-forms) {
  .uni-forms-item.is-direction-left {
    &:nth-last-child(1) {
      .uni-forms-item__label {
        background: $uni-bg-color;
        margin-top: -10rpx;
      }

      flex-direction: column !important;
      height: auto;
    }

  }
}

.button {
  width: 90%;
  margin-bottom: 50rpx;
  background-color: #ffffff;
  height: 90rpx;
  border-radius: 50rpx;
  font-family: PingFangSC;
  color: #FFFFFF;
  font-weight: $uni-font-weight;
  font-size: 34rpx;
  background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
}
  // 占位盒子
  .placeholder {
        height: 18rpx;
        width: 100%;
        background-color: #ffffff;
    }
</style>